<template>
  <a-modal v-model="visible" title="重新发起" @ok="handleOk" :confirm-loading="confirmLoading" @cancel="$emit('update:visible', false)">
    <a-form :form="form">
      <a-form-item label="发薪批次名称">
        <a-input
          placeholder="请输入"
          :maxLength="50"
          v-decorator="['orderTitle', { rules: [{ required: true, message: '发薪批次名称不能为空' }] }]"
        />
      </a-form-item>
      <a-form-item label="到账方式">
        <a-select
          :disabled="true"
          v-decorator="[
            'type',
            {
              rules: [
                {
                  required: true,
                  message: '到账方式不能为空'
                }
              ]
            }
          ]"
          placeholder="请选择"
        >
          <a-select-option :value="item.id" v-for="item in typeArr" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="选择用工单位">
        <a-select
          :disabled="true"
          show-search
          :filter-option="filterOption"
          v-decorator="[
            'companyId',
            {
              rules: [
                {
                  required: true,
                  message: '用工单位不能为空'
                }
              ]
            }
          ]"
          placeholder="请选择"
        >
          <a-select-option :value="item.id" v-for="item in companyIdArr" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="选择发薪员工" v-if="form.getFieldsValue(['companyId']).companyId">
        <div class="qy">
          <a-input v-decorator="['empCompanyIdsInput', { rules: [{ required: true, message: '发薪员工不能为空' }] }]" v-show="false" />
          <a-button class="mt4 mr12" @click="selectScopeVisible = true"> 选择人员 </a-button>
          <div class="yxz" v-if="selectedListTemp.length > 0">
            已选择
            <span v-for="(item, index) in selectedListTemp" :key="index">
              <span v-if="index < 3"> {{ item.name }} <span v-if="index !== selectedListTemp.length - 1"> 、</span> </span>
            </span>
            <span v-if="selectedListTemp.length > 2">
              等 <span class="icon-color">{{ selectedListTemp.length }}</span> 人
            </span>
          </div>
          <span v-else>当前未选择</span>
        </div>
      </a-form-item> -->
      <a-form-item label="备注">
        <a-textarea placeholder="请输入" :auto-size="{ minRows: 8, maxRows: 15 }" v-decorator="['remark']" />
      </a-form-item>
      <!-- <selectScope
        :companyId="form.getFieldsValue(['companyId']).companyId"
        :visible.sync="selectScopeVisible"
        :selectedList="selectedListTemp"
        @upDate="upDate"
      /> -->
    </a-form>
  </a-modal>
</template>

<script>
import moment from "moment";
import { postSaveAgainByBatchId, getCompanyUnits } from "./api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible(v) {
      if (!v) {
        // this.form.resetFields();
      }
    },
    dataJson(v) {
      if (v) {
        setTimeout(() => {
          this.form.setFieldsValue({
            orderTitle: v.orderTitle,
            type: v.type,
            companyId: v.companyId,
            remark: v.remark
          });
        });
      }
    }
  },
  created() {
    this.onGetCompanyUnits();
  },
  data() {
    return {
      confirmLoading: false,
      form: this.$form.createForm(this, {}),
      companyIdArr: [],
      typeArr: [
        { id: 1, name: "支付宝" },
        { id: 2, name: "微工卡" },
        { id: 3, name: "银行卡" }
      ]
    };
  },
  methods: {
    moment,
    async onGetCompanyUnits() {
      try {
        const { data } = await getCompanyUnits({
          pageNo: 1,
          pageSize: 1000
        });
        this.companyIdArr = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPostSaveAgainByBatchId(v) {
      try {
        this.confirmLoading = true;
        const { data } = await postSaveAgainByBatchId(v);
        this.confirmLoading = false;
        this.$router.push({ name: "applyForInfo", query: { id: data.id, dataType: data.type } });
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const v = {
            orderTitle: values.orderTitle,
            remark: values.remark,
            batchId: this.dataJson.id
          };
          this.onPostSaveAgainByBatchId(v);
        }
      });
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }
  }
};
</script>

<style></style>
